<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Calculator</title>
    <meta name="description" content="Simple Calculator With Dark Mode." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/css/side_bar.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../static/js/jquery.min.js"></script>
</head>
<body>

<div class="wrapper" >
    <div class="container" >
        <div class="header_container">
            <div class="header_left">
                <i class="fa fa-list toggle" aria-hidden="true"></i>
                <h>长度</h>
                <i class="fa fa-history" aria-hidden="true"></i>
            </div>
        </div>

        <div id="length">
            <div class="input_container">
                <input  class="res_in date_input degree_top" type="text" name="result" id="result" :value=in1 readonly />
            </div>
            <el-row>
                <el-select class="selector" v-model="v1" clearable placeholder="请选择度量">
                    <el-option
                            v-for="item in option1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-row>
            <el-row class="input_container">
                <input  class="degree_bot date_input" type="text" name="hisIn" id="hisIn" :value=in2 readonly />
            </el-row>
            <el-row>
                <el-select class="selector" v-model="v2" clearable placeholder="请选择度量">
                    <el-option
                            v-for="item in option2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-row>
            <div class="row_1 row">
                <input class="opt b3" type="button" value="%"/>
                <input class="button b3" type="button" value="CE" id="clear" @click="live('CE')"/>
                <input class="button b3 del" type="button" value="delete"  @click="live('delete')"/>
            </div>
            <div class="row_2 row">
                <input class="button b3 digital" type="button" value="7"    @click="live('7')"/>
                <input class="button b3 digital" type="button" value="8" @click="live('8')"/>
                <input class="button b3 digital" type="button" value="9" @click="live('9')"/>
            </div>
            <div class="row_3 row">
                <input class="button b3 digital" type="button" value="4"    @click="live('4')"/>
                <input class="button b3 digital" type="button" value="5" @click="live('5')"/>
                <input class="button b3 digital" type="button" value="6" @click="live('6')"/>
            </div>
            <div class="row_4 row">
                <input class="button b3 digital" type="button" value="1"    @click="live('1')"/>
                <input class="button b3 digital" type="button" value="2" @click="live('2')"/>
                <input class="button b3 digital" type="button" value="3" @click="live('3')"/>
            </div>
            <div class="row_5 row">
                <input class="opt b3" type="button" value="1/x"/>
                <input class="button b3" type="button" value="0"    @click="live('0')"/>
                <input class="button b3" type="button" value="." @click="live('.')"/>
            </div>
        </div>

        <div class="side_bar bar_close" id="sideBar">
            <div class="bar_wrapper">
                <header class="bar_head">计算器</header>
                <url class="bar_url">
                    <li class="bar_nav"><a href="/standard"><i class="fa fa-chevron-right" aria-hidden="true"></i> 标准</a></li>
                    <li class="bar_nav"><a href="/"><i class="fa fa-chevron-right" aria-hidden="true"></i> 科学</a></li>
                    <li class="bar_nav"><a href="/date"><i class="fa fa-chevron-right" aria-hidden="true"></i> 日期计算</a></li>
                </url>
                <header class="bar_head">转换器</header>
                <url class="bar_url">
                    <li class="bar_nav"><a href="/vol"><i class="fa fa-chevron-right" aria-hidden="true"></i> 容量</a></li>
                    <li class="bar_nav  nav_active"><a href="/length"><i class="fa fa-chevron-right" aria-hidden="true"></i> 长度</a></li>
                </url>
            </div>
        </div>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../static/js/stack.js"></script>
<script src="../static/js/models.js"></script>
<script src="../static/js/index.js"></script>
<script src="../static/js/calculate.js"></script>
<script src="../static/js/sideBar.js"></script>
<script type="module">
    const length=new Vue({
            el:'#length',
            name: "length",
            data() {
                return {
                    option1: [{
                        value: '选项1',
                        label: '微米'
                    },{
                        value: '选项2',
                        label: '米'
                    },{
                        value: '选项3',
                        label: '英寸'
                    },{
                        value: '选项4',
                        label: '海里'
                    }],
                    v1: '',
                    option2: [{
                        value: '选项1',
                        label: '微米'
                    },{
                        value: '选项2',
                        label: '米'
                    },{
                        value: '选项3',
                        label: '英寸'
                    },{
                        value: '选项4',
                        label: '海里'
                    }],
                    v2: '',
                    in1:'0',
                    in2:'0',
                    items:[],
                }

            },
        watch:{
            v1:{
                handler(val,oldVal){
                    this.calculate();
                },
                immediate:true,//立即监听
                deep:true,//深度监视
            },
            in1:{
                handler(val,oldVal){
                    this.calculate();
                },
                immediate:true,//立即监听
                deep:true,//深度监视
            },
            v2:{
                handler(val,oldVal){
                    this.calculate();
                },
                immediate:true,//立即监听
                deep:true,//深度监视
            }
        },
            methods:{
                live(val){
                    if(val==='CE'){
                        this.Clear_length();
                    }else if(val==='delete'){
                        this.del_length();
                    }else {
                        if(this.in1==='0'){
                            this.in1=val;
                        }else{
                            this.in1+=val;
                        }
                        this.push(val);
                        this.calculate();
                    }
                },
                Clear_length(){
                    this.clear();
                    this.in1='0';
                    this.in2='0';
                },
                del_length(){
                    if(!this.isEmpty()){
                        let temp=this.peek();
                        this.pop();
                        if(this.in1.value!=='0'){
                            if(this.in1.length-temp.length===0){
                                this.in1="0";
                            }else{
                                this.in1=this.in1.substring(0,this.in1.length-temp.length);
                            }
                        }
                        this.calculate();
                    }
                },
                calculate(){
                    if(this.v1==='' || this.v2===''){
                        return;
                    }
                    let cal_list={
                        '选项1':1000000,
                        '选项2':1,
                        '选项3':39.37008,
                        '选项4':0.00054
                    };
                    let t=this.in1;
                    t=t/cal_list[this.v1];
                    this.in2=t*cal_list[this.v2];
                },
                push : function (element) {
                    this.items.push(element);
                },

                pop : function () {
                    return this.items.pop();
                },

                peek : function () {
                    return this.items[this.items.length-1];
                },

                isEmpty : function () {
                    return this.items.length === 0;
                },

                size : function () {
                    return this.items.length;
                },

                clear : function () {
                    this.items = [];
                },

            }
        })

</script>
<script>

</script>
<style></style>
</html>